<template>
  <div class="material-acquisition">
    <div class="go-home" @click="goHome">
      <el-button size="small" type="primary">返回导航页面</el-button>
    </div>
    <!-- 顶部导航栏 -->
    <div class="step-header">
      <span class="step-title">Step3: 材料获取</span>
      <el-tag class="batch-import">批量导入</el-tag>
    </div>

    <!-- 材料卡片区域 -->
    <div class="material-cards">
      <!-- 新增卡片 -->
      <el-card class="add-card" shadow="hover" @click="handleAdd">
        <div class="content">
          <el-icon><Plus /></el-icon>
          <div>新建</div>
        </div>
      </el-card>

      <!-- 动态生成的材料卡片 -->
      <el-card
        v-for="(material, index) in materials"
        :key="material.id"
        class="info-card"
        shadow="hover"
      >
        <div class="card-header">
          <span class="card-number" :style="{ '--theme': theme }">{{
            index + 1
          }}</span>
          <div
            class="card-title"
            v-if="material.isEdit == null || material.isEdit == true"
          >
            {{ material.title }}
          </div>
          <el-input
            v-else
            v-model="material.title"
            @blur="handleBlur(material)"
            class="card-title-input"
            placeholder="请输入名称"
          />

          <el-dropdown
            trigger="click"
            @command="(command) => handleOperate(command, material)"
          >
            <span class="el-dropdown-link">
              <el-icon class="more-icon"> <MoreFilled /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Edit" command="edit"
                  >编辑材料信息</el-dropdown-item
                >
                <el-dropdown-item :icon="EditPen" command="rename"
                  >重命名</el-dropdown-item
                >
                <el-dropdown-item :icon="Delete" command="delete">
                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="handleDelete(material.id)"
                    @click.stop
                  >
                    <template #reference>
                      <span @click.stop style="width: 80%">删除</span>
                    </template>
                  </el-popconfirm>
                </el-dropdown-item>
                <el-dropdown-item :icon="DocumentCopy" command="copy"
                  >复制材料</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="card-content">
          <p class="data-value">{{ material.total }} kg CO₂</p>
          <p class="ignore-text">忽略占比：{{ material.ignoreRatio }}%</p>
          <p class="material-info">
            材料获取：{{ material.acquisition }} kg CO₂
          </p>
          <p class="transport-info">
            运输过程：{{ material.transport }} kg CO₂
          </p>
        </div>
      </el-card>
    </div>

    <div class="bottom-btn">
      <el-button type="primary" @click="submitForm"> 下一步 </el-button>
    </div>
  </div>
</template>

<script setup>
  import { Edit, EditPen, Delete, DocumentCopy } from "@element-plus/icons-vue";
  import { ref } from "vue";
  import useSettingsStore from "@/store/modules/settings";
  import useCarbonStorage from "@/store/modules/carbon";
  const emit = defineEmits(["goNav", "change", "saveToNextStep"]);
  const settingsStore = useSettingsStore();
  const carbonStorage = useCarbonStorage();
  // 材料数据
  const materials = ref([
    {
      id: 1,
      title: "砂砾",
      acquisition: 0,
      transport: 0,
      total: 0,
      ignoreRatio: 0,
    },
    {
      id: 2,
      title: "水泥",
      acquisition: 0,
      transport: 0,
      total: 0,
      ignoreRatio: 0,
    },
  ]);

  // 添加新材料
  const handleAdd = () => {
    const newId =
      materials.value.length > 0
        ? Math.max(...materials.value.map((m) => m.id)) + 1
        : 1;

    materials.value.push({
      id: newId,
      title: "",
      acquisition: 0,
      transport: 0,
      total: 0,
      ignoreRatio: 0,
      isEdit: false,
    });
  };
  const handleOperate = (command, material) => {
    console.log("handleOperate", command, material);
    switch (command) {
      case "edit":
        console.log("edit--material", material.title);
        carbonStorage.setOperateMaterial(material.title);
        emit("changeNoIndex", "editMaterial");
        break;
      case "rename":
        material.isEdit = false; // 标记为编辑状态
        console.log("rename");
        break;
      case "delete":
        console.log("delete");
        break;
      case "copy":
        console.log("copy");
        break;
      default:
        break;
    }
  };
  const submitForm = () => {
 
    emit("saveToNextStep", "three");
  }
  //输入名称市区焦点时
  const handleBlur = (material) => {
    material.isEdit = true; // 标记为编辑状态
    console.log("handleBlur", material.title);
  };
  //返回导航页面
  const goHome = () => {
    emit("goNav");
  };

  const handleDelete = (id) => {
    console.error("删除操作缺少有效的数据或 id", id);
  };
  const theme = computed(() => {
    return settingsStore.theme;
  });
</script>

<style lang="scss" scoped>
  .material-acquisition {
    padding: 20px;
    position: relative;
    .go-home {
      position: absolute;
      top: 0;
      right: 0;
    }

    .bottom-btn {
      right: 0;
      position: absolute;
      margin-top: 25px;
    }
  }

  .step-header {
    display: flex;
    //justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
  }

  .step-title {
    font-size: 18px;
    font-weight: 500;
  }

  .batch-import {
    background-color: #40c97b;
    color: white;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 4px;
  }

  .material-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 15px;
    .add-card {
      width: 200px;
      height: 200px;
      display: flex;
      cursor: pointer;
      justify-content: center;
      align-items: center;
      .content {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }

  .info-card {
    width: 200px;
    height: 200px;

    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    ::v-deep {
      .el-card__body {
        padding: 0 !important;
      }
    }
    .card-header {
      display: flex;
      align-items: center;
      padding: 12px;
      border-bottom: 1px solid #f0f0f0;
    }

    .card-number {
      background-color: var(--theme);
      color: white;
      width: 24px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      margin-right: 10px;
      font-size: 14px;
    }

    .card-title {
      flex-grow: 1;
      font-size: 16px;
      font-weight: 500;
    }

    .more-icon {
      font-size: 18px;
      color: #999;
    }

    .card-content {
      padding: 16px;
    }

    .data-value {
      font-size: 18px;
      text-align: center;
      margin-bottom: 12px;
      margin-top: 10px;
    }

    .text-style {
      color: #666;
      font-size: 14px;
      margin-bottom: 4px;
    }
    .ignore-text {
      @extend .text-style;
    }

    .material-info,
    .transport-info {
      @extend .text-style;
      margin-top: 0;
    }
  }
</style>
